$(function () {

  // 是否在查询中标志
  var flag = false;
  // 记录搜索框的值
  var search_value = '';

  //总页面数
  function totalPage() {
    var total = 0;
    // ajax同步请求
    $.ajax({
      type: "get",
      url: "ajax?action=totalPage",
      async: false,
      success: function (date) {
        total = date;
      }
    });
    return total;
  }
  var totalpage = totalPage();

  // 页面加载
  var nowpage = 1;
  function showPage(nowpage) {
    $.ajax({
      type: "get",
      url: "ajax?action=changePage&page="+nowpage,
      dataType: "json",
      success: function (date) {
        add(date);
      }
    });
    function add(data) {
      var trArraay = $('table tbody').children();
      for (var i = 0; i < trArraay.length; i++) {
        trArraay[i].remove();
      }
      for (var i = 0; i < data.length; i++) {
        var id = data[i].id;
        var name = data[i].name;
        var gender = data[i].gender;
        var email = data[i].email;
        var newNode = $("<tr><td>" + id + "</td><td>" + name + "</td><td>" + gender + "</td><td>" + email + "</td></tr>");
        $('table').append(newNode);
      }
    }
  }
  showPage(nowpage);

  // 查找页面加载
  function searchPage(nowpage, username) {
    $.ajax({
      type: "get",
      url: "ajax?action=searchPage&page="+nowpage+"&name="+username,
      dataType: "json",
      // data: {
      //   page: nowpage,
      //   action: 'searchPage',
      //   name: username
      // },
      success: function (date) {
        add(date);
      }
    });
    function add(data) {
      var trArraay = $('table tbody').children();
      for (var i = 0; i < trArraay.length; i++) {
        trArraay[i].remove();
      }
      for (var i = 0; i < data.length; i++) {
        var id = data[i].id;
        var name = data[i].name;
        var gender = data[i].gender;
        var email = data[i].email;
        var newNode = $("<tr><td>" + id + "</td><td>" + name + "</td><td>" + gender + "</td><td>" + email + "</td></tr>");
        $('table').append(newNode);
      }
    }
  }

  // 按钮加载
  function showButton() {
    var append_html = '<input type="button" value="上一页" class="prev_page">';
    for (var i = 0; i < totalpage - 1; i++) {
      if (totalpage > 8 && nowpage > 5 && i < nowpage - 3) {
        if (i < 2) {
          append_html += '<input type="button" value="' + (i + 1) + '" class="number">';
        }
        else if (i == 2) {
          append_html += '<span class="page_dot">•••</span>';
        }
      } else if (totalpage > 8 && nowpage < totalpage - 3 && i > nowpage + 1) {
        if (nowpage > 5 && i == nowpage + 2) {
          append_html += '<span class="page_dot">•••</span>';
        } else if (nowpage < 7) {
          if (i < 7) {
            append_html += '<input type="button" value="' + (i + 1) + '" class="number">';
          } else if (i == 7) {
            append_html += '<span class="page_dot">•••</span>';
          }
        }
      }

      else {
        if (i == nowpage - 1) {
          append_html += '<input type="button" value="' + (i + 1) + '" class="number nowpage">';
        } else {
          append_html += '<input type="button" value="' + (i + 1) + '" class="number">';
        }
      }
    }

    if (nowpage == totalpage) {
      append_html += '<input type="button" value="' + (i + 1) + '" class="number nowpage">';
    } else {
      append_html += '<input type="button" value="' + (i + 1) + '" class="number">';
    }
    append_html += '<input type="button" value="下一页" class="next_page"><span>共' + totalpage + '页,到第</span><input type="text" class="targetPage"><span>页</span><input type="button" value="确定" class="ok">';
    $('.page').append(append_html);
  }
  showButton();

  $('.page').on('click', 'input', function () {

    // 上一页
    if ($(this).hasClass('prev_page')) {
      nowpage--;
      if (nowpage < 1) {
        nowpage = 1
      }

      if (!flag) {
        showPage(nowpage);
        $('.page').html('');
        showButton();
      } else {
        searchPage(nowpage, search_value);
        $('.page').html('');
        showButton();
      }
      return;
    }
    // 下一页
    else if ($(this).hasClass('next_page')) {
      nowpage++;
      if (nowpage > totalpage) {
        nowpage = totalpage;
      }

      if (!flag) {
        showPage(nowpage);
        $('.page').html('');
        showButton();
      } else {
        searchPage(nowpage, search_value);
        $('.page').html('');
        showButton();
      }
      return;
    }
    // 跳转页按钮
    else if ($(this).hasClass('ok') && !$(this).hasClass('nowpage')) {
      nowpage = parseInt($('.targetPage').val());
      console.log($('.targetPage').val());
      if ($('.targetPage').val() == null || $('.targetPage').val() == '') {
        nowpage = 1;
      }
      if (nowpage > totalpage) {
        nowpage = totalpage;
      }
      if (!flag) {
        showPage(nowpage);
        $('.page').html('');
        showButton();
      } else {
        searchPage(nowpage, search_value);
        $('.page').html('');
        showButton();
      }
      return;
    }
    //点击页码事件
    else if ($(this).hasClass('number')) {
      nowpage = parseInt($(this).val());
      if (!flag) {
        showPage(nowpage);
        $('.page').html('');
        showButton();
      } else {
        searchPage(nowpage, search_value);
        $('.page').html('');
        showButton();
      }
      return;
    }
  });

  // 搜索按钮
  $('.table .search .search_btn').click(function () {
    search_value = $('.search_text').val();
    nowpage = 1;
    if (search_value == null || search_value == '') {
      flag = false;
      showPage(nowpage);
      totalpage = totalPage();
      $('.page').html('');
      showButton();
    } else {
      flag = true;
      searchPage(nowpage, search_value);
      $.ajax({
        type: "get",
        url: "ajax?action=totalSearch&name="+search_value,
        async: false,
        // data: {
        //   action: 'totalSearch',
        //   name: search_value,
        // },
        success: function (date) {
          totalpage = date;
        }
      });
      if (totalpage == 0) {
        $('.page').html('');
      } else {
        $('.page').html('');
        showButton();
      }
    }
  });
});